import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Tabs, Cell, Image, Button } from "react-vant";
import { getTags } from "../../api";
import logo from "../../assets/1.png";
interface TagRawState {
  title: string;
  image: string;
  aboutCount: number;
  article: number;
}

const Index: React.FC = () => {
  const [tags, setTags] = useState<TagRawState[]>([]);
  const token = localStorage.getItem("token");
  const navigate = useNavigate();
  const fetchTags = async () => {
    const resp = await getTags();
    console.log(resp.data);
    setTags(resp.data.data);
  };

  useEffect(() => {
    fetchTags();
  }, []);
  return (
    <div>
      <Tabs>
        <Tabs.TabPane title="全部标签">
          <Cell.Group>
            {tags.map((v, i) => {
              return (
                <Cell
                  center
                  key={i}
                  title={v.title}
                  label={`${v.aboutCount}人关注-${v.article}篇文章`}
                  icon={<Image width={44} height={44} src={v.image} round />}
                  value={
                    <Button size="small" type="primary" round>
                      + 关注
                    </Button>
                  }
                />
              );
            })}
          </Cell.Group>
        </Tabs.TabPane>
        <Tabs.TabPane title="关注标签">
          {token ? (
            <div>
              {tags.slice(5).map((v, i) => {
                return (
                  <Cell
                    center
                    key={i}
                    title={v.title}
                    label={`${v.aboutCount}人关注-${v.article}篇文章`}
                    icon={<Image width={44} height={44} src={v.image} round />}
                  />
                );
              })}
            </div>
          ) : (
            <div>
              <img
                src={logo}
                width={"100%"}
                alt=""
                onClick={() => navigate("/login")}
              />
            </div>
          )}
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};

export default Index;
